<template>
  <view>
    <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 30rpx' }"
      :head-style="{ padding: '28rpx 30rpx 10rpx' }" :head-border-bottom="false">
      <view slot="head">
        <view class="card-row u-flex head">
          <u-section title="培训类型次数占比" color="#014833" font-size="32" :right="false"></u-section>
        </view>
      </view>
      <view slot="body">
        <view class="card-row u-p-t-10 u-p-b-20">
          <view class="body-cont w-100p">
            <view class="charts-box u-m-t-10">
              <qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
            </view>
          </view>
        </view>
      </view>
    </u-card>
  </view>
</template>
<script>
export default {
  watch: {
    'customerNo': {
      immediate: true,
      handler: function (newval) {

        if (newval) {
          this.getServerData();
        }
      },
    },
  },
  props: {
    customerNo: {
      type: String,
      default: ''
    },
  },
  data () {
    return {
      chartData: {},
      opts: {
        rotate: false,
        rotateLock: false,
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [5, 5, 5, 5],
        dataLabel: true,
        enableScroll: false,
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25
        },
        title: {
          name: "",
          fontSize: 15,
          color: "#666666"
        },
        subtitle: {
          name: "",
          fontSize: 25,
          color: "#7cb5ec"
        },
        extra: {
          ring: {
            ringWidth: 30,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      }
    };
  },
  created () {

  },
  methods: {
    getServerData () {
      this.$get(`/train/trainTypeStatistics?customerNo=${this.customerNo}`).then(result => {
        if (result.body) {
          const obj = result.body[0]
          let res = {
            series: [
              {
                data: [
                  { "name": "岗前培训", "value": obj.preTrainCount },
                  { "name": "其他培训", "value": obj.otherTrainCount },
                ]
              }
            ]
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        }
      })
    },
  }
};
</script>
<style lang="scss" scoped>
.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #F6F6F6;
}

.body-cont {
  box-shadow: 0 0 18rpx 0 rgba($color: #014833, $alpha: 0.2);
  border-radius: 12rpx;
  padding: 20rpx;

  h4 {
    color: #333;
    font-size: 30rpx;
  }
}

.charts-box {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  height: 100%;
}
</style>